<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="《缙青年》电子期刊 - 移动端PDF阅读器">
    <meta name="keywords" content="缙青年,电子期刊,PDF阅读器,移动端">
    <meta name="author" content="缙云公司—韩剑">
    <title>《缙青年》电子期刊</title>
    
    <!-- 预加载关键资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- 字体加载 -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
    
    <!-- 样式文件 -->
    <link rel="stylesheet" href="assets/css/common.css">
    <link rel="stylesheet" href="assets/css/main.css">
    
    <!-- PWA支持 -->
    <meta name="theme-color" content="#2c3e50">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="缙青年期刊">
</head>
<body>
    <!-- 主容器 -->
    <div class="app-container">
        <!-- 头部区域 -->
        <header class="app-header">
            <h1 class="main-title">《缙青年》电子期刊</h1>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">


            <!-- 加载状态 -->
            <div class="loading-container" id="loadingContainer">
                <div class="loading-spinner"></div>
                <p class="loading-text">正在加载期刊列表...</p>
            </div>

            <!-- 书籍列表容器 -->
            <div class="books-container" id="booksContainer" style="display: none;">
                <div class="books-header">
                    <h2 class="books-title">期刊列表</h2>
                    <span class="books-count" id="booksCount">0 本期刊</span>
                </div>
                <div class="books-grid" id="booksGrid">
                    <!-- 书籍项目将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 空状态 -->
            <div class="empty-state" id="emptyState" style="display: none;">
                <div class="empty-icon">📚</div>
                <h3 class="empty-title">暂无期刊</h3>
                <p class="empty-message">请稍后再来查看最新期刊</p>
            </div>
        </main>

        <!-- 底部版权信息 -->
        <footer class="app-footer">
            <div class="copyright">
                <p class="developer-info">《缙青年》电子期刊</p>
                <p class="year-info">© 2025 软件开发：缙云公司—韩剑</p>
            </div>

        </footer>
    </div>

    <!-- 错误提示模态框 -->
    <div class="error-modal" id="errorModal" style="display: none;">
        <div class="error-content">
            <div class="error-icon">⚠️</div>
            <h3 class="error-title" id="errorTitle">出现错误</h3>
            <p class="error-message" id="errorMessage">请稍后重试</p>
            <div class="error-actions">
                <button class="btn btn-primary" id="errorRetryBtn">重试</button>
                <button class="btn btn-secondary" id="errorCloseBtn">关闭</button>
            </div>
        </div>
    </div>

    <!-- JavaScript文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script>
        // 配置PDF.js worker（用于获取页数）
        if (typeof pdfjsLib !== 'undefined') {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
        }
    </script>
    <!-- Polyfills（兼容性支持） -->
    <script src="assets/js/polyfills.js"></script>
    <!-- 兼容性检测 -->
    <script src="assets/js/compatibility.js"></script>
    <!-- 工具函数 -->
    <script src="assets/js/utils.js"></script>
    <!-- 主页面脚本 -->
    <script src="assets/js/main.js"></script>
</body>
</html>
